import React, {Component} from 'react';
import {StyleSheet, View, Image, TouchableWithoutFeedback} from 'react-native';
import utils from '../../common/utils';
import recommendList from '../goods/recommendList';

let width = utils.getScreen().width;
export default class extends Component {
    //初始值
    state = {
        adList: [
            {
                title: '今日推荐',
                url: 'recommendList',
                extraData: {type: 1},
                img: require('./img/ad_1.jpg')
            },
            {
                title: '限时抢购',
                url: 'flashSale',
                img: require('./img/ad_2.jpg')
            },
            {
                title: '超级划算',
                url: 'recommendList',
                extraData: {type: 3, title: '超级划算'},
                img: require('./img/ad_3.jpg')
            },
            {
                title: '视频购',
                img: require('./img/ad_4.jpg')
            },
            {
                title: '9块9包邮',
                url: 'price99',
                img: require('./img/ad_5.jpg')
            }
        ]
    };

    render() {
        const {adList} = this.state;
        const {navigation} = this.props;
        let list1 = adList.filter((item, idx) => idx < 2),
            list2 = adList.filter((item, idx) => idx >= 2);
        return (
            <View style={styles.container}>
                <View style={styles.list}>
                    {
                        list1.map((item, idx) =>
                            <TouchableWithoutFeedback key={idx} onPress={() => {
                                if (item.url) {
                                    navigation.navigate(item.url, item.extraData || {});
                                }
                            }}>
                                <View style={styles.item}>
                                    <Image source={item.img}
                                           style={{
                                               width: width / 2,
                                               height: width / 2 * .646,
                                               marginRight: idx === 0 ? 1 : 0
                                           }}/>
                                </View>
                            </TouchableWithoutFeedback>
                        )
                    }
                </View>
                <View style={styles.list}>
                    {
                        list2.map((item, idx) =>
                            <TouchableWithoutFeedback key={idx} onPress={() => {
                                if (item.url) {
                                    navigation.navigate(item.url, item.extraData || {});
                                }
                            }}>
                                <View style={styles.item}>
                                    <Image source={item.img}
                                           style={{
                                               width: width / 3,
                                               height: width / 3,
                                               marginTop: 1,
                                               marginRight: idx === 2 ? 0 : 2
                                           }}/>
                                </View>
                            </TouchableWithoutFeedback>
                        )
                    }
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        marginTop: 6,
        backgroundColor: 'transparent'
    },
    list: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    item: {
        flexDirection: 'row'
    }
});
